<template>
	<view class="personal-one-piece">
		<!-- 顶部一体化背景+信息区 -->
		<view class="top-integral">
			<!-- 顶部导航 -->
			<view class="nav-bar">
				<text>个人中心</text>
			</view>

			<!-- 个人信息 -->
			<view class="user-info">
				<image class="avatar" src="../../static/组 9(4).png" mode="cover"></image>
				<view class="user-detail">
					<text class="user-name">张先生</text>
					<text class="phone">18602564789</text>
				</view>
			</view>

			<!-- 优惠券（内嵌在顶部背景内） -->
			<view class="coupon-inline" @click="goCoupon">
				<view>
					<image src="../../static/彩色-优惠券@2x.png" mode="aspectFit"></image>
					<view class="youhui">我的优惠券</view>
				</view>
				<view class="coupon-num">3张 ></view>
			</view>
		</view>

		<!-- 中间一体化功能区（订单+服务无分割） -->
		<view class="middle-function">
			<view class="order" style="display: flex;justify-content: space-between;margin-bottom: 5px;">
				<text>我的订单</text>
				<text class="all-order" @click="goAllOrder">全部订单 ></text>
			</view>

			<!-- 订单标签 -->
			<view class="order-tabs">
				<view class="tab-item" @click="goOrder(1)">
					待支付
				</view>
				<view class="tab-item active" @click="goOrder(2)">
					待使用
				</view>
				<view class="tab-item" @click="goOrder(3)">
					待评价
				</view>
			</view>
			<view style="padding-bottom: 5px;font-size: 16px;margin-bottom: 5px;border-bottom: 3px solid #a9a9a9;">我的服务
			</view>
			<!-- 服务网格 -->
			<view class="service-grid">

				<view class="service-item" v-for="(item, index) in serviceList" :key="index"
					@click="goService(item.path)">
					<image class="service-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="service-text">{{ item.text }}</text>
				</view>
			</view>
		</view>

		<!-- 底部一体化按钮 -->
		<view class="bottom-btn" @click="logout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 服务列表
	const serviceList = ref([{
			icon: '../../static/组 9(3).png',
			text: '领券中心',
			path: '/pages/my/couponCenter/couponCenter'
		},
		{
			icon: '../../static/组 9(4).png',
			text: '邀请好友',
			path: '/pages/invite-friend'
		},
		{
			icon: '../../static/组 9(5).png',
			text: '我的车辆',
			path: '/pages/my/mycar/mycar'
		},
		{
			icon: '../../static/组 9(6).png',
			text: '消费记录',
			path: '/pages/my/consumption/consumption'
		},
		{
			icon: '../../static/组 9(7).png',
			text: '我的维修',
			path: '/pages/my/maintenance/maintenance'
		},
		{
			icon: '../../static/组 9(8).png',
			text: '意见反馈',
			path: '/pages/feedback'
		},
		{
			icon: '../../static/组 9(9).png',
			text: '收货地址',
			path: '/pages/address'
		}
	]);

	// 返回上一页
	const goBack = () => uni.navigateBack();

	// 跳转优惠券
	const goCoupon = () => uni.navigateTo({
		url: '/pages/my/myCoupon/myCoupon'
	});

	// 跳转订单 - 修改为传递tab索引
	const goOrder = (tabIndex) => {
		uni.navigateTo({
			url: `/pages/my/myOrder/myOrder?tabIndex=${tabIndex}`
		});
	};

	// 全部订单
	const goAllOrder = () => uni.navigateTo({
		url: '/pages/my/myOrder/myOrder?tabIndex=0'
	});

	// 跳转服务页
	const goService = (path) => uni.navigateTo({
		url: path
	});

	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定退出登录？',
			success: res => res.confirm && uni.showToast({
				title: '退出成功',
				icon: 'success'
			})
		});
	};

	// 跳转首页
	const goHome = () => uni.switchTab({
		url: '/pages/index'
	});

	// 跳转个人中心
	const goPersonal = () => uni.switchTab({
		url: '/pages/personal-center'
	});
</script>

<style lang="scss" scoped>
	.personal-one-piece {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-size: 28rpx;
		padding-bottom: 100rpx;
		/* 预留底部导航 */

		// 顶部一体化区域（背景+导航+信息+优惠券）
		.top-integral {
			background: linear-gradient(135deg, #409eff, #66b1ff);
			border-radius: 0 0 30rpx 30rpx;
			padding: 0 30rpx 20rpx;

			// 导航栏
			.nav-bar {
				padding-top: 30rpx;
				// display: flex;  
				text-align: center;
				// align-items: center;
				// justify-content: space-between;
				height: 88rpx;
				color: #fff;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: 500;
				}

				.nav-right {
					display: flex;
					gap: 25rpx;
				}
			}

			// 个人信息
			.user-info {
				// display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				padding: 20rpx 0;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 255, 255, 0.6);
				}

				.user-detail {
					// margin-left: 20rpx;
					color: #fff;

					.user-name {
						font-size: 32rpx;
						font-weight: 500;
						margin-right: 10rpx;
						// display: block;
					}

					.phone {
						font-size: 28rpx;
						opacity: 0.9;
						margin-top: 8rpx;
						// display: block;
					}
				}
			}

			// 内嵌优惠券
			.coupon-inline {
				background: rgba(255, 255, 255, 0.2);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				color: #fff;

				view {
					display: flex;

					.youhui {
						font-size: 28rpx;
						line-height: 36rpx;
					}
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}

				.coupon-num {
					// background: #ff9900;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		// 中间一体化功能区（订单+服务无分割）
		.middle-function {
			background: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;

			// 订单标签
			.order-tabs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.tab-item {
					width: 205rpx;
					height: 90rpx;
					display: flex;
					border-radius: 10rpx;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 26rpx;
					overflow: hidden;

					&:nth-child(1) {
						background: url("../../static/组 9(0).png") no-repeat center center;
						background-size: cover;
					}

					&:nth-child(2) {
						background: url("../../static/组 9(1).png") no-repeat center center;
						background-size: cover;
					}

					&:nth-child(3) {
						background: url("../../static/组 9(2).png") no-repeat center center;
						background-size: cover;
					}
				}

				.all-order {
					color: #999;
					font-size: 26rpx;
				}
			}

			// 服务网格
			.service-grid {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.service-item {
					width: 23%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 15rpx 0;

					.service-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					.service-text {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}

		// 底部一体化按钮
		.bottom-btn {
			background: #D9D9D9;
			margin: 0 20rpx 20rpx;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 30rpx;
		}

		// 底部导航
		.tab-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #eee;

			.tab-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tab-icon {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
				}

				.tab-text {
					font-size: 22rpx;
					color: #666;
				}

				&.center {
					position: relative;

					.center-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background: #ff9900;
						padding: 10rpx;
						position: absolute;
						top: -30rpx;
					}
				}

				&:nth-child(1) {
					.tab-text {
						color: #409eff;
					}
				}
			}
		}
	}
</style>